<?php get_header(); ?>
<script language="javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.imagesloaded.js" type="text/javascript"></script>
<script language="javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.hoverizr.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){
    // lightbox
    $('.portfolio').each(function(){
      $(this).parent().find('ul li a').lightBox({
        imageLoading:   '<?php bloginfo('template_url'); ?>/images/lightbox-ico-loading.gif',
        imageBtnClose:  '<?php bloginfo('template_url'); ?>/images/lightbox-btn-close.gif',
        imageBtnPrev:   '<?php bloginfo('template_url'); ?>/images/lightbox-btn-prev.gif',
        imageBtnNext:   '<?php bloginfo('template_url'); ?>/images/lightbox-btn-next.gif',
        maxHeight: 500,
        maxWidth: 700,
      });
    });
    
    $('.projects').click(function(){
      $(this).parent().find('ul li:nth-child(1) a').trigger('click');
    });
  
    var w = ($('.slider-box').length * $('.slider-box').outerWidth())+$('.slider-box').length-1;
    $('.box-container').css('width', w+'px');
    
    $('.slider-box:nth-child(2)').addClass('current');
    
    // get to second slide
    $('.slider-box').css('left', '-141px');
    $('.slider-box:nth-child(2)').addClass('current');
    $('.partners .box-slider-nav a:nth-child(2)').addClass('current');
    
    $('body').on('mouseover', '.slider-box:not(.current)', function(){
      // grayscale.reset($(this));
      $(this).find('.gotcolors').stop().animate({opacity: 1}, 200);
    });
    
    $('body').on('mouseout', '.slider-box:not(.current)', function(){
      // grayscale($(this));
      $(this).find('.gotcolors').stop().animate({opacity: 0}, 200);
      // console.log($(this));
    });
    
    $('.slider-box').click(function(){
      var index = $('.slider-box').index(this);
      $('a.nav:nth-child('+(index+1)+')').trigger('click');
      // console.log($('a.nav:nth-child('+(index+1)+')'));
    });
    
    $('a.nav').click(function(){
      var el = $(this);
      // grayscale($('.slider-box.current img'));
      $('.slider-box.current img.gotcolors').stop().animate({opacity: 0}, 200);
      $('.partners .box-slider-nav a.current img.gotcolors').stop().animate({opacity: 0}, 200);
      // grayscale($('.partners .box-slider-nav a.current img'));
      
      $('a.nav').removeClass('current');
      $('.slider-box').removeClass('current');
      var index = $('.nav').index(this);
      $(this).addClass('current');
      $('.slider-box:nth-child('+(index+1)+')').addClass('current');
      
      // slide to center
      var container = $('.box-slider').width();
      var b_width = $('.slider-box.current').width();
      var center = (container/2)-(b_width/2);
      var cur_pos = $('.slider-box.current').position().left;
      
      $('.slider-box').animate({
        left: '-='+(cur_pos-center)
      }).promise().done(function(){
        // grayscale(el);
        // grayscale.reset($('.slider-box.current img'));
        $('.slider-box.current img.gotcolors').stop().animate({opacity: 1}, 200);
        $('.partners .box-slider-nav a.current img.gotcolors').stop().animate({opacity: 1}, 200);
        // grayscale.reset($('.partners .box-slider-nav a.current img'));
      });
      
      // grayscale($('.partners img'));
      // grayscale.reset($('.slider-box.current img'));
      // $('.slider-box.current img.gotcolors').stop().animate({opacity: 1}, 200);
      // grayscale.reset($('.partners .box-slider-nav a.current img'));
    });
    
    // grayscale
    var img = $('body').imagesLoaded();
    global = img;
    img.always(function(){
      // grayscale($('.partners img'));
      // grayscale.reset($('.slider-box.current img'));
      // grayscale.reset($('.partners .box-slider-nav a.current img'));
      // $('.partners img').hoverizr({
        // width: '130px'
      // });
      
      	$('.partners img').each(function() {
          $(this).wrap('<div style="display: inline-block; width: '+ this.width +'px; height:' + this.height + 'px;">').clone().addClass('gotcolors').css('position', 'absolute').insertBefore(this);
          this.src = grayscale(this.src);
          
          $(this).siblings('.gotcolors').css('opacity', '0');
        }).animate({opacity: 1}, 500);
        
        $('.slider-box.current img.gotcolors').stop().animate({opacity: 1}, 200);
        $('.partners .box-slider-nav a.current img').stop().animate({opacity: 1}, 200);
    });
  });
</script>

<div class="partners">
<div class="container">
  <div class="box">
    <div class="box-header">
      <h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin littock, a Latin professor at Hampden-Sydney College in Virginia. looked up one of the more obscure Latin word.</h4>
    </div>
    
    <div class="box-slider">
      <div class="box-container">
        <?php
          $args = array(
            'numberposts' => -1,
            'category' => 4
          );
          $posts = get_posts($args);
          
          foreach($posts as $post){
          $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
          $attachments = attachments_get_attachments();
        ?>
      
        <div class="slider-box">
          <img src="<?php echo $feat_image; ?>" />
          
          <div class="description">
            <h4><?php echo $post->post_title; ?></h4>
            <p><?php echo $post->post_content; ?></p>
            <a class="url" href="<?php the_field('website_url',$post->ID) ?>" class="btn">GO TO WEBSITE</a>
          <?php if ($attachments) { ?>
            <a class="projects portfolio url" href="javascript:void(0)" class="btn">VIEW PROJECTS</a>
            
            <ul style="display: none;">
            <?php foreach($attachments as $attachment){ ?>
              <li><a class="group<?php echo $post->ID ?>" href="<?php echo $attachment['location'] ?>"></a></li>
            <?php } ?>
            </ul>
          <?php } ?>
          </div>
        </div>
        
        <?php } ?>
      </div>
    </div>
    
     <div class="box-slider-nav">
      <div class="nav-container">
        <?php 
          $args = array(
            'numberposts' => -1,
            'category' => 4
          );
          $posts = get_posts($args);
          
          foreach($posts as $post){
        ?>
          <a class="nav" href="javascript:void(0);"><?php echo wp_get_attachment_image(get_post_thumbnail_id($post->ID), 'medium') ?></a>
        <?php } ?>
        <div class="clear"></div>
      </div>
    </div>
    
    <div class="clear"></div>
  </div>
</div>
</div>
<div class="clear"></div>

<?php get_footer(); ?>
